<template>
  <editor
    v-model="content"
    :init="tinymceInit"
    :api-key="apiKey"
  />
</template>

<script>
import Editor from '@tinymce/tinymce-vue'
import { uploadFile } from "@/utils/oss"
// import "tinymce/tinymce"

export default {
  components: {
    Editor
  },
  data() {
    return {
      content: '',
      apiKey: "n58jtcxz6ewghpsslbx6z7cf5v4a8biku9l8b7ttr0h9pb1i",
      tinymceInit: {
        language: "zh_CN",
        height: 500,
        menubar: false,
        plugins: ["table", "image"],
        toolbar: `undo redo | formatselect | bold italic backcolor
        | alignleft aligncenter alignright alignjustify
        | bullist numlist outdent indent | removeformat image table | help`,
        images_upload_handler: function(blobInfo, success, failure) {
          const result = uploadFile(blobInfo.blob())
          result
            .then(imageUrl => {
              console.log("img url", imageUrl)// OSS上传
              success(imageUrl)
            })
            .catch(err => {
              failure(err)
            })
        }
      }
    }
  },
  watch: {
    content(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    init(value) {
      this.content = value
    }
  }
}
</script>
